import React from "react";

const MyContext = React.createContext('light');
export default function ContextTest(props) {
    return <MyContext.Provider value={'dark'}><ToolBar/></MyContext.Provider>
}

function ToolBar() {
    return <ButtonBar></ButtonBar>
}

/**
 * 这种方式 不管是class 类型的组件还是函数组件都可以用
 * @returns {JSX.Element}
 * @constructor
 */
function ButtonBar() {
    return (<MyContext.Consumer>
        {theme => <button>hey gays {theme}</button>}
    </MyContext.Consumer>)
}


class BtBar extends React.Component {
    static contextType = MyContext;
    render() {
        return <button>hey gays this.context}</button>
    }
}